<template>
	<view class="container">
		<view class="content_view">
			<!-- #ifdef MP-WEIXIN -->
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="userInfo.headImgUrl"></image>
			</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<button class="avatar-wrapper" @click="choseAvatar">
				<image class="avatar" :src="userInfo.headImgUrl"></image>
			</button>
			<!-- #endif -->

			<view class="gender">
				<tui-radio-group @change="changeGender">
					<tui-radio :checked="userInfo.gender==1" value="1" borderColor="#999">
					</tui-radio>
					<text class="tui-text">男</text>
					<tui-radio :checked="userInfo.gender==2" value="2" color="#e60012" borderColor="#999">
					</tui-radio>
					<text class="tui-text">女</text>
				</tui-radio-group>
			</view>

			<view class="gender">
				<picker mode="date" fields="day" :value="userInfo.birthday" start="1930-01-01" @change="bindDateChange">
					<view class="picker">
						{{birthdayStr||'生日'}}
					</view>
				</picker>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<input type="nickname" class="gender weui-input" placeholder="请输入昵称" maxlength="15"
				:value="userInfo.nickname" @change="getNickname" />
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<input class="gender weui-input" placeholder="请输入昵称" maxlength="15" :value="userInfo.nickname"
				@input="getNickname" />
			<!-- #endif -->
		</view>

		<view class="bottom_view">
			<view class="report_view" @tap="submit">
				<text class="report_text">确认修改</text>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js");
	export default {
		data() {
			return {
				userInfo: {},
				birthdayStr: ''
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let that = this;
			util.request('user/userInfo').then(function(res) {
				if (res.data.birthday) {
					that.birthdayStr = res.data.birthday.replace(' 00:00:00', '')
				}
				that.userInfo = res.data
			});
		},
		methods: {
			bindDateChange: function(e) {
				let that = this
				that.userInfo.birthday = e.detail.value;
				that.birthdayStr = e.detail.value;
			},
			changeGender(e) {
				let that = this
				that.userInfo.gender = e.detail.value;
			},
			getNickname(e) {
				let that = this
				that.userInfo.nickname = e.detail.value;
			},
			choseAvatar(e) {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						let tempFilePaths = res.tempFilePaths[0]

						that.uploadAvatar(tempFilePaths)
					}
				})
			},
			onChooseAvatar(e) {
				let that = this
				that.uploadAvatar(e.detail.avatarUrl)
			},
			uploadAvatar(avatarUrl) {
				let that = this
				util.uploadFile('upload/upload', avatarUrl).then(function(data) {
					that.userInfo.headImgUrl = data.url
				})
			},
			submit() {
				let that = this;
				let str = this.userInfo.nickname;
				if (str.length == 0) {
					wx.showToast({
						title: '请输入昵称',
						icon: 'error'
					})
					return false
				}
				str = this.userInfo.gender;
				if (!str || str.length == 0) {
					wx.showToast({
						title: '请选择性别',
						icon: 'error'
					})
					return false
				}
				str = this.userInfo.birthday;
				if (!str || str.length == 0) {
					wx.showToast({
						title: '请选择生日',
						icon: 'error'
					})
					return false
				}

				util.request('user/updateUserInfo', {
					nickname: that.userInfo.nickname,
					headImgUrl: that.userInfo.headImgUrl,
					birthday: that.userInfo.birthday,
					gender: that.userInfo.gender || 0
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						wx.navigateBack()
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #fafafa;
		display: flex;
		flex-direction: column;
	}

	/* 边框样式 */
	button::after {
		border: 0;
	}

	.content_view {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: 68px;
		position: relative;
	}

	.avatar-wrapper {
		width: 100px;
		height: 100px;
		padding: 0 !important;
		margin: 0 !important;
		border-radius: 100px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 100px;
		border-style: solid;
		border-width: 1px;
		border-color: #d6d6d5;
	}

	.weui-input {
		border-radius: 20px;
		font-size: 24rpx;
		width: 60%;
		height: 40px;
		background: #f4f4f6;
		line-height: 40px;
		text-align: center;
	}

	.bottom_view {
		position: fixed;
		bottom: 50rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		background-color: white;
		z-index: 20;
		padding-top: 10px;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.report_view {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 706rpx;
		height: 76rpx;
		background-color: $color-default;
		border-radius: 19px;
		margin-bottom: 10px;
	}

	.report_text {
		color: #fff;
		font-size: 15px;
	}

	.gender {
		margin-top: 30px;
	}

	.picker {
		border-radius: 20px;
		font-size: 24rpx;
		width: 110px;
		height: 40px;
		background: #f4f4f6;
		line-height: 40px;
		text-align: center;
	}

	.tui-text {
		margin: 0 10px 0 3px;
	}
</style>
